<script setup>
  import { ref } from 'vue';
  import { useStore } from "@/store/index.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";

  let store = useStore();
  let username = ref('')

  let currentTime = new Date();
  let currentHour = currentTime.getHours();

  if (currentHour >= 0 && currentHour < 6) {
    username.value = '早点休息！'
  } else if (currentHour >= 6 && currentHour < 8) {
    username.value = '早上好！'
  } else if (currentHour >= 8 && currentHour < 12) {
    username.value = '上午好！'
  } else if (currentHour >= 12 && currentHour < 13) {
    username.value = '中午好！'
  } else if (currentHour >= 13 && currentHour < 19) {
    username.value = '下午好！'
  } else {
    username.value = '晚上好！'
  }

  if (LocalStoreUtil.isLogin()) {
    username.value = username.value.replace("！", "，" + LocalStoreUtil.getUserInfo().nickName + "！")
  }

</script>
<template>
  <div class="holle-content">{{ username }}</div>
</template>
<style scoped>
  .holle-content {
    height: 38px;
    overflow: hidden;
    background-color: white;
    padding: 3px 18px;
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translate(-50%, 0px);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: bounceIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    z-index: 5;
    color: rgb(38, 38, 38);
  }

  @keyframes bounceIn {
  0% {
    /* transform: scale(0.3); */
  }
  70% {
    /* transform: scale(1.05); */
    top: 88px;
  }
  100% {
    /* transform: scale(1); */
    top: -50px;
  }
}

</style>